import { ref } from 'vue'

// 右键菜单状态管理
export const contextMenuState = ref({
  visible: false,
  x: 0,
  y: 0,
  item: null
})

// 显示右键菜单的方法
export const showContextMenu = (event, item) => {

  /**
   * 菜单高度，因为有的底部某些项会超出主界面被裁剪，需要边缘检测
   * todo：待优化，不同类型的菜单个数不一样，需要更精细的边缘检测，不能写死
   * */
  const menuHeight = 200;

  let x = event.clientX - 50;
  let y = event.clientY;

  // 边缘检测 - Y轴
  if (event.clientY + menuHeight > window.innerHeight) {
    // 如果菜单会超出底部，则向上偏移
    y = event.clientY - menuHeight;
  }

  contextMenuState.value = {
    visible: true,
    x: x,
    y: y,
    item: item
  }
}

// 隐藏右键菜单的方法
export const hideContextMenu = () => {
  contextMenuState.value.visible = false
}
